<template>
	<view class="wrod-tip">
		<!-- #ifdef H5 -->
		<view :class="['num-box',item.frequency]" :style="showText ? style : {}" @mouseenter="wordShow(item)" @mouseleave="wordShow(item)" @click.stop="wordDetail(item)">
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<!-- <view :class="['num-box',item.frequency]" :style="showText ? style : {}" @click.stop="wordShow(item)"> -->
		<!-- #endif -->
			<text class="text-c" v-show="showText" :class="[`${item.frequency}-c`]">{{item.isGK == 1 ? '高' : '中'}}</text>
			<text v-if="item.isGK==1">{{item.gk_cs > 99 ? '99+' : item.gk_cs}}</text>
			<text v-else>{{item.zk_cs > 99 ? '99+' : item.zk_cs}}</text>
			<!-- <text>99+</text> -->
		</view>
		<view class="word-modal" v-show="item.show" >
			<view class="modal-box slot-content">
				<view class="d-a-c" :class="['text','f32',item.frequency+'-c']">
				{{frequencyText[item.frequency]}}
				<view class="yinbiao">{{item.phonetic}}</view>
				</view>
				<view class="d-s-c">
					<view class="f24 mr10 modal-text">中考出现{{item.zk_cs}}次</view>
					<u-rate v-model="item.zk_zy || 0" :disabled="true" size="28" active-color="#f2cb51" inactive-color="#f9e5a8"></u-rate>
				</view>
				<view class="d-s-c">
					<view class="f24 mr10 modal-text">高考出现{{item.gk_cs}}次</view>
					<u-rate v-model="item.gk_zy || 0" :disabled="true" size="28" active-color="#f2cb51" inactive-color="#f9e5a8"></u-rate>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['item','showText'],
	    data(){
	        return {
				frequencyText: {'high':'高频词','middle':'中频词','low':'低频词','base':'基础词'},
				style:{
					padding:'0 10rpx',
					minWidth:'92rpx'
				}
	        }
	    },
	    mounted(){},
	    methods:{
	        // 单词显示隐藏更多
	        wordShow(item) {
	        	item.show = !item.show
	        },
			wordDetail(item){
				item.show = false
				uni.navigateTo({
					url:'/pages/study/word/detail?wordId=' + item.word_id
				})
			},
	    }
	}
</script>

<style lang="scss" scoped>
	.wrod-tip{
		position: relative;
	}
	
	.num-box {
		// width: 110rpx;
		min-width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 22rpx;
		color: #FFFFFF;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.text-c{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
			border-radius: 5rpx;
			box-sizing: border-box;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 30rpx;
			// margin-left: 20rpx;
		}
	}
	
	.high-c {
		color:#ff5d8d;
	}
	.middle-c {
		color:#76bdf9;
	}
	.base-c {
		color:#9033d7;
	}
	.low-c {
		color:rgba(43,195,51,0.5);
	}
	
	.high {
		background:linear-gradient(135deg,#ff5d8d,#fe7fa6);
	}
	.middle {
		background:linear-gradient(135deg,#76bdf9,#97e1f2);
	}
	.base {
		background:linear-gradient(135deg,#9033d7,#be76f4);
	}
	.low {
		background:linear-gradient(135deg,rgba(43,195,51,0.5),rgba(100,211,100,.5));
	}
	
	.word-modal {
		position: absolute;
		left: 110rpx;
		top: 0;
		z-index: 9;
		border: 1rpx solid #e5e5e5;
		border-radius:20rpx ;
	}
	
	.modal-box{
		padding: 10rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		line-height: 40rpx;
		// width: 450rpx;
		.text{
			font-weight: bold;
		}
		
		.fayin{
			display: flex;
			align-items: center;
			text{
				margin-right: 20rpx;
			}
			
			image{
				width: 54rpx;
				margin-right: 10rpx;
			}
		}
		
		.modal-text{
			white-space: nowrap;
		}
		
		.yinbiao{
			margin-left: auto;
			color: #000;
		}
	}
</style>

